<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">
	<link rel="stylesheet" href="css/mop-lqs.css">

<style type="text/css">
	#loading{
		z-index:1002;
		display: none;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -48.5px; 
		width: 99px;
		height: 99px; 
	}

	.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.5;
	opacity:.50;
	filter: alpha(opacity=50);
	}
    .jiedan{
        display: none;
        width:5.4rem;
        height:3.87rem;
        background:rgba(247,247,247,1);
        opacity:0.96;
        position: absolute;
        top: 40%;
        left: 15%;
        z-index:1003;
        border-radius: .2rem;
        font-size: 0.28rem;

    }
    .jiedan section{
        width:5.4rem;
        height:.92rem;
        background:rgba(30,129,210,1);
        opacity:0.96;
        border-radius:0.2rem .2rem 0  0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.34rem;
        color: #ffffff;
    }
    .jiedan aside div{
        height: 0.73rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.2rem;
    }
    .jiedan aside div p{
        color: #1e81d2;
    }
    .mui-pull-top-pocket {
	    display: none !important;
	}
</style>

</head>

<body id="refreshContainer" style="background-color: #f4f9fd;">

<!--header begin-->
<header>
    <div id="flexHeader">
        <div class="div1 mui-action-back"><a href="index.html"><img src="images/icon_arrow_left.png"></a></div>
        <div class="div2">赚钱</div>
        <div class="div3" id="tbSet">接单设置</div>
    </div>
</header>
<!--header end-->

<!--Account selection begin-->
<article class="height-padding account-selection">
    <div class="set-makeMoney">
        <div>
            <li><p class="fl"><span>ID:</span>21890474</p>
                <p class="fl complete"><span>完成率</span>100%</p></li>
        </div>
        <div class="clearfix">
            <p>设置好每个平台的模式，可以组合多个平台同时接单</p>
        </div>
        <div>
            <p><span>淘宝任务:</span>全部/全部/0-2000元</p>
        </div>
    </div>
</article>
<!--Account selection end-->

<!--Shopping mall begin-->
<article class=" account-selection make-money-new">
    <section>
        <main>
            <div><img src="images/icon_taobao.png"></div>
            <div id="tb">添加淘宝账号</div>
        </main>
    </section>
    <section>
        <main>
            <div><img src="images/icon_alibaba.png"></div>
            <div id="ali">添加阿里巴巴账号</div>
        </main>
    </section>
    <section onclick="toBind('bPinduoduo')">
        <main>
            <div><img src="images/icon_pdd.png"></div>
            <div id="pdd">添加拼多多账号</div>
        </main>
    </section>
    <section onclick="toBind('bMeilishuo')">
        <main>
            <div><img src="images/icon_mls.png"></div>
            <div id="mls">添加美丽说账号</div>
        </main>
    </section>
    <section onclick="toBind('bJingdong')">
        <main>
            <div><img src="images/icon_jd.png"></div>
            <div id="jd">添加京东账号</div>
        </main>
    </section>
    <section onclick="toBind('bMogujie')">
        <main>
            <div><img src="images/icon_mgj.png"></div>
            <div id="mgj">添加蘑菇街账号</div>
        </main>
    </section>
    
</article>
<!--Shopping mall end-->

<!--Receipt-->
<a name="alreadyConnectedTask" class="receipt">接单</a>
<div id="loading">
	<div class='mop-load-x'></div>
</div>
<article class="jiedan">
    <section>来任务啦</section>
    <aside>
        <div><label>任务类型：</label><p id='taskName'>手机淘宝垫付任务</p></div>
        <div><label>垫付金额：</label><p id='price'>0元</p></div>
        <div><label>任务佣金：</label><p id="customerReceive">0金</p></div>
        <div><label>任务限时：</label><p>1小时</p></div>
    </aside>
</article>
<div id="fade" class="black_overlay"></div>
</body>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/config.js"></script>
<script src="js/vconsole.min.js"></script>

<script>
	var vs = new VConsole()
	var vo;
	$(function () {
		load()
	})
	$('#tbSet').click(function(){
		window.location = "taoBaoNumberSet.html"
	})
	
	function toBind(platformName) {
		if (vo[platformName] != 2) {
			window.location.replace("bindOnAccount.html")
		}
	}
	
	function pageJump(dom){
		var name = $(dom).attr('name')
		window.location = name + ".html"
		
	}
	var ws
	mui.init({
		keyEventBind: {
			swipeBack:true, //启用右滑关闭功能
			beforeback: function(){
				ws.close()
				return true
			}
		}
	});
	$(function() {
		var user = JSON.parse(localStorage.getItem('user'))
		$('.receipt').click(function(){
			//显示遮罩
			$('#loading').show()
			$('#fade').show()
			ws = new WebSocket($WS_BASE_URL + user.id)
			ws.onopen = function() {
				plus.nativeUI.toast('接单中请不要关闭此页面')
				ws.send(' hi dude, give me a order. ')
			}
			ws.onmessage = function(evt) {
				var data = JSON.parse(evt.data)
				if (data.tag == 0) {
					plus.nativeUI.toast("当前没有可接订单，请稍候再试")
					ws.close()
					return
				}
				beep()
				var options = {cover:false,title:'接到新的任务'}
				var str = '消息: 请在规定时间内操作并提交'
				plus.push.createMessage( str, "LocalMSG", options )
				if(plus.os.name=="iOS"){
					console.log('*如果无法创建消息，请到"设置"->"通知"中配置应用在通知中心显示!');
				}
				$('#taskName').html(data.task.taskName)
				$('#price').html(data.task.goods1RealPrice * data.task.goods1ItemNum)
				$('#customerReceive').html(data.task.customerReceive)
				$('#loading').hide()
				$('.jiedan').show()
				ws.close()
				var target = data.type == 0 ? "taobaoMobileMission_new.html" : "taobaoMobileMission_browse_new.html"
				setTimeout(function(){
					window.location.replace(target + "?orderId=" + data.order)
				}, 3000)
			};

			ws.onclose = function(evt) {
				$('#loading').hide()
				$('#fade').hide()
				if(evt.code === 1006){
					plus.nativeUI.toast('诶...网络好像有点问题')

				}
			};
			
			ws.onerror = function(evt) {
				plus.nativeUI.toast('诶...网络好像有点问题')
				$('#loading').hide()
				$('#fade').hide()
			};
			plus.push.addEventListener("receive",function(msg){
				plus.nativeUI.toast("receive"+msg)
			},true)
			plus.push.addEventListener("click",function(msg){
				plus.nativeUI.toast("click"+msg)
			},true)
			plus.push.setAutoNotification( true )
			
			return false
		})
	})
	
	function beep() {
		plus.device.beep();
		plus.device.vibrate();
	}
	
	mui.init({
	  pullRefresh : {
	    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
	    down : {
	      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
	      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
	      height:'50px',//可选,默认50px.下拉刷新控件的高度,
	      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
	      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
	      auto: false,//可选,默认false.首次加载自动上拉刷新一次
	      callback : refrash //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
	    }
	  }
	});
	function load() {
		$.ajax({
			url: $CONFIG.baseUrl + "/api/user/platform",
			type: 'get',
			data:{},
			beforeSend:function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'))
			},
			success: function(data){
				vo = data.data
				// 未身份认证
				if (vo.status != 2) {
					mui.toast('当前账号未认证，身份证认证通过之后才能接单')
					$('.receipt').css('background-color', '#c3d0de')
					$('.receipt').unbind()
				}
				// 至少哟啊绑定一个平台才能接单
				if (vo.balibaba != 2
					&& vo.btaobao != 2
					&& vo.bpinduoduo != 2
					&& vo.bmeilishuo != 2
					&& vo.bjingdong != 2
					&& vo.bmogujie != 2) {
					mui.toast('至少要成功绑定一个平台才能接单')
					$('.receipt').css('background-color', '#c3d0de')
					$('.receipt').unbind()
				}
				if (vo.balibaba == 2) {
					$('#ali')[0].textContent = vo.balibabaName
				}				
				if (vo.btaobao == 2) {
					$('#tb')[0].textContent = vo.btaobaoName
				}
								
				if (vo.bpinduoduo == 2) {
					$('#pdd')[0].textContent = vo.bpinduoduoName
				}
							
				if (vo.bmeilishuo == 2) {
					$('#mls')[0].textContent = vo.bmeilishuoName
				}
							
				if (vo.bjingdong == 2) {
					$('#jd')[0].textContent = vo.bjingdongName
				}
							
				if (vo.bmogujie == 2) {
					$('#mgj')[0].textContent = vo.bmogujieName
				}
			},
			errror: function(error){
				mui.toast('数据加载失败，请检查网络')
			}
		})
	}
	function refrash() {
		load()
		mui('#refreshContainer').pullRefresh().endPulldown();
	}
			
</script>
</html>